<template>
    <div>
        <Header background-color="#E5EBFD" font-color="#000" :title="t('waitLoan.waitLoan')">
            <template #left>
                <van-icon name="arrow-left" color="#000" size="25px" class="icon-left" @click="goBack()" />
            </template>
        </Header>
        <main>
            <div class="upload">
                <div class="postive div">
                    <div class="left">
                        <van-uploader ref="Uploader1" max-count="1" :after-read="onAfterRead1" v-model="img1" multiple>
                            <div class="img img1">
                                <img src="../../../../assets/mine/img1.png" alt="">
                            </div>
                        </van-uploader>
                    </div>
                    <div class="right btn1">
                        <div class="btn">{{ '驾驶证照片' }}</div>
                    </div>
                </div>
                <div class="negtive div">
                    <div class="left">
                        <van-uploader ref="Uploader2" max-count="1" :after-read="onAfterRead2" v-model="img2" multiple>
                            <div class="img img2">
                                <img src="../../../../assets/mine/img2.png" alt="">
                            </div>
                        </van-uploader>
                    </div>
                    <div class="right">
                        <div class="btn">{{ '身份证' }}</div>
                    </div>
                </div>
                <div class="negtive div">
                    <div class="left">
                        <van-uploader ref="Uploader3" max-count="1" :after-read="onAfterRead3" v-model="img3" multiple>
                            <div class="img img3">
                                <img src="../../../../assets/mine/img3.png" alt="">
                            </div>
                        </van-uploader>
                    </div>
                    <div class="right">
                        <div class="btn">{{ '收入证明' }}</div>
                    </div>
                </div>
                <div class="save" @click="submit">{{ t('authentication.save') }}</div>
            </div>
        </main>
    </div>
</template>

<script setup>
import Header from "@/components/Header/index.vue";
import myInput from '@/components/Input/index.vue';
import useLanguage from '@/hooks/useLanguage';
import { useRouter } from 'vue-router'
import { reactive, onMounted, ref } from 'vue'
import { userApi, loansApi } from '@/api'
import { showNotify } from 'vant';
const router = useRouter()
const { t } = useLanguage()



const setAuth = reactive({
    img1: '',
    img2: '',
    img3: '',
})
const rules = {
    img1: [{ rule: /\S+/, message: t('authentication.upload1') }],
    img2: [{ rule: /\S+/, message: t('authentication.upload2') }],
    img3: [{ rule: /\S+/, message: t('authentication.upload2') }],
}

const img1 = ref([])
const img2 = ref([])
const img3 = ref([])
const Uploader1 = ref(null)
const Uploader2 = ref(null)
const Uploader3 = ref(null)
const curUpload = ref(0)

function upload(type) {
    if (type == 'img1') {
        curUpload.value = 0
        Uploader1.value.chooseFile()
    } else if (type == 'img2') {
        curUpload.value = 1
        Uploader2.value.chooseFile()
    } else {
        curUpload.value = 2
        Uploader3.value.chooseFile()
    }
}

async function onAfterRead1(file, detail) {
    const formData = new FormData()
    formData.append('file', file.file)
    const { code, data } = await userApi.upload(formData)
    if (code == 20000) {
        setAuth.img1 = data
    }
}
async function onAfterRead2(file, detail) {
    const formData = new FormData()
    formData.append('file', file.file)
    const { code, data } = await userApi.upload(formData)
    if (code == 20000) {
        setAuth.img2 = data
    }
}
async function onAfterRead3(file, detail) {
    const formData = new FormData()
    formData.append('file', file.file)
    const { code, data } = await userApi.upload(formData)
    if (code == 20000) {
        setAuth.img3 = data
    }

}

function validate(key) {
    let s = true
    rules[key].forEach(v => {
        if (!v.rule.test(setAuth[key])) {
            // 弹窗
            showNotify({ type: 'warning', message: v.message })
            s = false
            return false
        }
    })
    return s
}

function submit() {
    if (!validate('img1')) return // 当validate('idCardImg1')为false才执行
    if (!validate('img2')) return // 当validate('idCardImg2')为false才执行
    if (!validate('img3')) return // 当validate('idCardImg2')为false才执行
    // console.log(setAuth);
    // 登录
    addLoan()
}

async function addLoan() {
    const { code, data } = await loansApi.addLoan(setAuth)
    if (code == 20000) {
        showNotify({ type: 'success', message: t('waitLoan.succeeded') })
        goBack()
    }
}


function goBack() {
    router.go(-1)
}

onMounted(() => {

})
</script>

<style lang="less" scoped>
.icon-left {
    margin-left: 10px;
}

main {
    padding-top: 10px;

    .upload {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;

        .div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 10px 25px;

            .left {
                width: 100%;
                text-align: center;

                .img1 img {
                    height: 200px;
                }

                .img2 img {
                    height: 150px;
                }

                .img3 img {
                    height: 150px;
                }
            }

            .btn1 {
                margin-top: -35px;
            }

            .right {
                text-align: center;
                word-break: keep-all;

                .btn {
                    // border-radius: 3px;
                    // border: 1px solid #E0E0E0;
                    font-size: 14px;
                    padding: 5px 20px;
                    box-sizing: border-box;
                    color: #2196F3;
                }
            }
        }

        .save {
            text-align: center;
            word-break: keep-all;
            font-size: 14px;
            background-color: #2196F3;
            color: #E0E0E0;
            border: #E0E0E0 1px solid;
            padding: 5px 20px;
            border-radius: 50px;
            box-sizing: border-box;
            margin-top: 5px;
            width: 80%;
        }
    }
}
</style>